<template>
  <div class="pageBox">
    <div class="contentBox">
      <el-form
        :model="formInline"
        label-width="100px"
        :label-position="`right`"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="时间">
              <el-date-picker
                size="mini"
                v-model="formInline.dataDateRange"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-button type="primary">查询</el-button>
            <el-button type="primary">导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column align="center" prop="ABNORMAL_TYPE" label="异常类型">
          <template slot-scope="scope"> 
            <span v-if="scope.row.ABNORMAL_TYPE === 1">过载</span>
           <span v-else-if="scope.row.ABNORMAL_TYPE === 2">重载</span>
            <span v-else-if="scope.row.ABNORMAL_TYPE === 3">三相电压不平衡</span>
            <span v-else-if="scope.row.ABNORMAL_TYPE === 4">三相电流不平衡</span>
            <span v-else-if="scope.row.ABNORMAL_TYPE === 5">过电压</span>
            <span v-else-if="scope.row.ABNORMAL_TYPE === 6">低电压</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="START_TIME" label="开始时间">
        </el-table-column>
        <el-table-column align="center" prop="END_TIME" label="结束时间">
        </el-table-column>
      </el-table>
    </div>
    <div class="paginationBox">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="10"
        layout="total,prev, pager, next, jumper, sizes"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { queryRunAlarm } from "@/api/runningAlarm";
import runningAlarm from "@/jsonData/runningAlarm.json";
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
  data() {
    return {
      formInline: {
        pageNum: 1,
        pageSize: 15,
        trId: 1,
        alarmTimeStart: "2025-01-01",
        alarmTimeEnd: "2025-01-01",
      },
      scorePart1: "",
      scorePart2: "",
      tableData: runningAlarm,
      currentPage: 1,
      total: 100,
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getTableData();
    },
    getTableData() {
      let parmas = this.formInline;
      queryRunAlarm(parmas).then((res) => {
        if (res.code) {
          this.tableData = res.data;
          this.total = res.total;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table th {
  background-color: #118b7d !important;
  color: white !important; /* Optional: Change text color to white for better contrast */
}
.main-content[data-v-567ae6d4],
.page[data-v-567ae6d4] {
  background-color: rgb(16, 190, 190) !important;
}
.pageBox {
  background: #fff;
  padding: 0px 10px 10px 10px;
}
.contentBox {
  background-color: #f9f9f9;
}
::v-deep.el-form-item__label {
  font-size: 14px !important;
}
::v-deep.el-button {
  font-size: 12px !important;
  border: none !important;
}
.paginationBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
::v-deep .el-input .el-input--mini .el-input--suffix {
  width: 150px;
}
::v-deep.el-button--primary {
    background-color: #118b7d !important;
    border-color: #118b7d !important;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #118b7d!important;
    color: #FFF;
}
::v-deep.el-pager li.active {
    color: #118b7d!important;
    cursor: default;
}
::v-deep.el-pager li.hover {
    color: #118b7d!important;
    cursor: default;
}
</style>
